<template>
    <el-row style="height: 100%;background-color: #f3f4f9">
      <el-row style="height: 10%;border-bottom-style: solid;border-bottom-color: #e6e6e6;background-color: #ffffff">
        <Header></Header>
      </el-row>
      <el-row :gutter="20" style="height: 90%">
        <el-col :span="4" style="height: 100%;">
          <Navigator></Navigator>
        </el-col>
        <el-col :span="20" style="border-top: 1px solid #2c3e50;padding: 0;height: 100%">
          <el-row>
            <el-col :span="4">
                <h1>管理员功能</h1>
            </el-col>
          </el-row>
          <el-row>
            <el-form>
                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="用户地址：">
                            <el-row>
                                <el-col :span="6">
                                    <el-input type="primary" v-model="userAddress"></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" @click="getUserInfo">查询</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row v-if="formActive">
                    <el-col :span="12" :offset="2">
                        <el-form>
                          <el-form-item label="用户名:">
                            <el-col :span="10">
                                {{ userForm.username }}
                            </el-col>
                          </el-form-item>
                            <el-form-item label="公司地址:">
                                <el-col :span="10">
                                    {{ userForm.companyAddress }}
                                </el-col>
                            </el-form-item>
                            
                            <el-form-item label="公司名称:">
                                <el-col :span="10">
                                    {{ userForm.companyName }}
                                </el-col>
    
                            </el-form-item>

                            <el-form-item label="用户角色:">
                                <el-col :span="10">
                                    {{ userForm.role }}
                                </el-col>
                            </el-form-item>
                            <el-form-item label="地址:">
                              <el-col :span="10">
                                  {{ userForm.location }}
                              </el-col>
                          </el-form-item>
                          <el-form-item label="经营范围:">
                            <el-col :span="10">
                                {{ userForm.bussinuessScope }}
                            </el-col>
                        </el-form-item>
                        </el-form>
                    </el-col>
                    
                </el-row>
                
            </el-form>
          </el-row>
        </el-col>
      </el-row>
      
    </el-row>
  
  </template>
  
  <script>
  
  import Header from "@/components/Header";
  import Navigator from "@/components/Navigator";
  
  export default {
    components: {Header, Navigator},
    data(){
      return{
        formActive:0,
        userAddress:"",
        userForm: {
          username:"",
          companyAddress:"",
          companyName:"",
          role:"",
          location:"",
          bussinuessScope:""
        },
      }
    },
    mounted() {
  
    },
    methods:{
      getUserInfo() {
        let postData = {
          'address': this.userAddress
        }
        this.axios.post('/user_info_query', postData).then((res) => {
          if (res.data.code == 200) {
            this.userForm = res.data.data
            if (this.userForm.role == 0) {
              this.userForm.role = '管理员'
            }else if (this.userForm.role == 1) {
              this.userForm.role = '采购公司'
            }else if (this.$cookies.get('role') == 2) {
              this.userForm.role = '运输公司'
            }
            this.formActive = 1
          }else {
            alert(`请求失败，原因为${res.data.data}`)
          }
        })
      }

    }
  }
  </script>
  
  <style scoped>
  .container{
    height: 100%;
    width: 100%;
    position: fixed;
  }
  .aside{
    background-color: #545c64;
  }
  .main{
    background-color: #fff;
  }
  .form{
    width: 400px;
    margin: 0 auto;
  }
  </style>